<template>
    <div class="cate">
        <!-- 搜索 -->
        <form action="/">
            <van-search
                v-model="value"
                show-action
                placeholder="请输入搜索关键词"
                @search="onSearch"
                
            />
            </form>

        <div class="con">
                <!-- 侧边栏 -->
                <van-sidebar v-model="active"  @change="onChange">
                    <van-sidebar-item title="所有分类" />
                    <van-sidebar-item :title="item.name" v-for="item,index in firstList" :key="index"/>
                    
                </van-sidebar>
                <div class="con-right"> 
                    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                    <van-swipe-item>
                       <img src="../../assets/img/jingtian.jpeg" alt="">
                    </van-swipe-item>
                    <van-swipe-item>
                        <img src="../../assets/img/jingtian.jpeg" alt="">
                    </van-swipe-item>
           
                    </van-swipe>
                    <!-- 宫格 -->
                    <van-grid :column-num="3">
                        <van-grid-item v-for="item,index in twoList" :key="index" :icon="item.icon" :text="item.name" />
                    </van-grid>
                </div>

        </div>
       
    </div>
</template>
<script>
import hh from '../../components/hh.vue'
import {ref,reactive,toRefs} from 'vue'
import {getCate} from '@/utils/home'
export default {
    setup(props) {
        const data = reactive({
            allList:[],//所有的数据
            firstList:[],//一级分类的数据
            twoList:[],//二级分类的数据
            active:0,
            value:'',//搜索的关键字
        })
         getCate().then(res=>{
            console.log(res)
            data.allList = res.data
            data.firstList = res.data.filter(item=>item.level == 1)
            data.twoList = res.data.filter(item=>item.level == 2)


         })
        //  点击侧边
        const onChange = (val)=>{
            console.log(val);//下标
            if(val==0){
                data.twoList = data.allList.filter(item=>item.level == 2)
                console.log(data.twoList);
                
                return
            }

            let id = data.firstList[val-1].id
            data.twoList = data.allList.filter(item=>item.pid == id)
            console.log(data.twoList);


        }
        // 搜索
        const onSearch=()=>{
            if(data.value == ''){
                 data.twoList = data.allList.filter(item=>item.level == 2)
            }else{
                data.twoList = data.twoList.filter(item=>item.name.includes(data.value))
            }

        }
         return {...toRefs(data),onChange,onSearch}
    },
    components:{
        hh
    }
}
</script>
<style lang="scss" scoped>
 /* .cate >>>p{
    background: #c00;
} */
:deep(p){
    background: #c00;
}
.con{
    display: flex;
    .van-sidebar{
        background: #fff;
        font-size:12px;
        width:100px;
        padding:0;
        }
        .con-right{
            flex:1;
            overflow:hidden;
            .my-swipe{
                img{
                    width:226px;
                    height:130px;
                    margin:0 auto;
                }
            }

        }

}

</style>
